<template>
	<view class="container">
		<!-- 订单信息 -->
		<view class="order-info-card">
			<view class="info-header">
				<text class="header-title">订单信息</text>
				<text class="order-number">订单号：{{ orderInfo.id }}</text>
			</view>
			
			<view class="order-content">
				<image class="pet-thumb" :src="orderInfo.petAvatar" mode="aspectFill"></image>
				<view class="order-details">
					<text class="pet-name">{{ orderInfo.petName }}</text>
					<text class="service-info">{{ orderInfo.serviceType }}</text>
					<text class="service-time">{{ orderInfo.serviceTime }}</text>
				</view>
			</view>
		</view>

		<!-- 评价对象信息 -->
		<view class="target-card">
			<view class="target-header">
				<text class="target-title">{{ isOwner ? '评价喂养师' : '评价宠物主人' }}</text>
			</view>
			
			<view class="target-info">
				<image class="target-avatar" :src="targetUser.avatar" mode="aspectFill"></image>
				<view class="target-details">
					<text class="target-name">{{ targetUser.name }}</text>
					<view class="target-stats">
						<text class="stat-item">⭐ {{ targetUser.rating }}</text>
						<text class="stat-item">📝 {{ targetUser.orderCount }}单</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 评分区域 -->
		<view class="rating-card">
			<text class="section-title">整体评分 <text class="required">*</text></text>
			<view class="star-rating">
				<view 
					class="star-item" 
					v-for="(star, index) in 5" 
					:key="index"
					@click="setRating(index + 1)">
					<text class="star-icon" :class="{active: index < rating}">⭐</text>
				</view>
				<text class="rating-text">{{ ratingText }}</text>
			</view>
		</view>

		<!-- 评价标签 -->
		<view class="tags-card">
			<text class="section-title">选择标签</text>
			<view class="tags-grid">
				<view 
					class="tag-item" 
					:class="{active: selectedTags.includes(tag.value)}"
					v-for="tag in availableTags" 
					:key="tag.value"
					@click="toggleTag(tag.value)">
					<text class="tag-icon">{{ tag.icon }}</text>
					<text class="tag-text">{{ tag.label }}</text>
				</view>
			</view>
		</view>

		<!-- 文字评价 -->
		<view class="comment-card">
			<text class="section-title">文字评价</text>
			<textarea 
				class="comment-textarea" 
				v-model="comment" 
				:placeholder="commentPlaceholder"
				maxlength="300" />
			<text class="char-count">{{ comment.length }}/300</text>
		</view>

		<!-- 照片上传 -->
		<view class="photos-card">
			<text class="section-title">晒图（可选）</text>
			<view class="photos-grid">
				<view class="photo-item" v-for="(photo, index) in photos" :key="index">
					<image class="photo-preview" :src="photo" mode="aspectFill"></image>
					<view class="delete-photo" @click="deletePhoto(index)">×</view>
				</view>
				<view class="upload-photo" @click="uploadPhoto" v-if="photos.length < 6">
					<text class="upload-icon">📷</text>
					<text class="upload-text">添加照片</text>
				</view>
			</view>
			<text class="photo-hint">最多上传6张照片</text>
		</view>

		<!-- 匿名选项 -->
		<view class="anonymous-card">
			<view class="anonymous-row">
				<text class="anonymous-label">匿名评价</text>
				<switch 
					:checked="isAnonymous" 
					@change="toggleAnonymous"
					color="#FFB6C1" />
			</view>
			<text class="anonymous-hint">开启后，评价将以匿名方式展示</text>
		</view>

		<!-- 底部按钮 -->
		<view class="footer-actions">
			<button class="cancel-btn" @click="cancel">取消</button>
			<button class="submit-btn" @click="submitReview">提交评价</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderId: null,
			isOwner: true, // true: 宠物主人评价喂养师, false: 喂养师评价主人
			orderInfo: {
				id: '202401150001',
				petName: '橘猫咪咪',
				petAvatar: '/static/cat1.png',
				serviceType: '喂食 + 遛猫',
				serviceTime: '2024-01-15 14:00-15:00'
			},
			targetUser: {
				name: '张小宠',
				avatar: '/static/avatar1.png',
				rating: 4.9,
				orderCount: 156
			},
			rating: 0,
			selectedTags: [],
			comment: '',
			photos: [],
			isAnonymous: false,
			ownerTags: [
				{ value: 'professional', label: '专业', icon: '👍' },
				{ value: 'careful', label: '细心', icon: '❤️' },
				{ value: 'patient', label: '耐心', icon: '😊' },
				{ value: 'punctual', label: '准时', icon: '⏰' },
				{ value: 'clean', label: '卫生', icon: '✨' },
				{ value: 'friendly', label: '亲和', icon: '🤝' },
				{ value: 'experienced', label: '有经验', icon: '🎯' },
				{ value: 'responsible', label: '负责', icon: '💯' }
			],
			providerTags: [
				{ value: 'easy', label: '好沟通', icon: '💬' },
				{ value: 'clear', label: '要求明确', icon: '📋' },
				{ value: 'nice', label: '友好', icon: '😊' },
				{ value: 'pet_friendly', label: '宠物友好', icon: '🐾' },
				{ value: 'environment', label: '环境好', icon: '🏠' },
				{ value: 'prepared', label: '准备充分', icon: '✅' }
			]
		}
	},
	computed: {
		availableTags() {
			return this.isOwner ? this.ownerTags : this.providerTags
		},
		ratingText() {
			const textMap = ['', '很差', '较差', '一般', '满意', '非常满意']
			return textMap[this.rating] || '请选择评分'
		},
		commentPlaceholder() {
			if (this.isOwner) {
				return '分享您对喂养师服务的评价，如服务态度、专业程度等'
			} else {
				return '分享您对宠物主人的评价，如沟通情况、宠物状况等'
			}
		}
	},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId
		}
		if (options.role) {
			this.isOwner = options.role === 'owner'
		}
		this.loadOrderInfo()
	},
	methods: {
		// 加载订单信息
		loadOrderInfo() {
			// 模拟加载数据
			console.log('加载订单信息:', this.orderId)
		},

		// 设置评分
		setRating(value) {
			this.rating = value
		},

		// 切换标签
		toggleTag(tag) {
			const index = this.selectedTags.indexOf(tag)
			if (index > -1) {
				this.selectedTags.splice(index, 1)
			} else {
				this.selectedTags.push(tag)
			}
		},

		// 上传照片
		uploadPhoto() {
			uni.chooseImage({
				count: 6 - this.photos.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.photos = [...this.photos, ...res.tempFilePaths]
				}
			})
		},

		// 删除照片
		deletePhoto(index) {
			this.photos.splice(index, 1)
		},

		// 切换匿名
		toggleAnonymous(e) {
			this.isAnonymous = e.detail.value
		},

		// 取消
		cancel() {
			uni.showModal({
				title: '确认取消',
				content: '确定要放弃本次评价吗？',
				success: (res) => {
					if (res.confirm) {
						uni.navigateBack()
					}
				}
			})
		},

		// 提交评价
		submitReview() {
			// 验证必填项
			if (this.rating === 0) {
				uni.showToast({
					title: '请选择评分',
					icon: 'none'
				})
				return
			}

			// 确认提交
			uni.showModal({
				title: '确认提交',
				content: '评价提交后无法修改，确定要提交吗？',
				success: (res) => {
					if (res.confirm) {
						this.doSubmit()
					}
				}
			})
		},

		// 执行提交
		doSubmit() {
			uni.showLoading({ title: '提交中...' })

			const reviewData = {
				orderId: this.orderId,
				rating: this.rating,
				tags: this.selectedTags,
				comment: this.comment,
				photos: this.photos,
				isAnonymous: this.isAnonymous
			}

			// 模拟提交
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '评价成功',
					icon: 'success'
				})

				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}, 2000)
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #F0F8FF 0%, #FFF0F5 100%);
	padding: 30rpx;
	padding-bottom: 180rpx;
}

/* 订单信息卡片 */
.order-info-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 25rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.info-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	padding-bottom: 15rpx;
	border-bottom: 2rpx solid #F0F0F0;
}

.header-title {
	font-size: 26rpx;
	font-weight: 700;
	color: #333333;
}

.order-number {
	font-size: 22rpx;
	color: #999999;
}

.order-content {
	display: flex;
	align-items: center;
}

.pet-thumb {
	width: 100rpx;
	height: 100rpx;
	border-radius: 15rpx;
	margin-right: 20rpx;
}

.order-details {
	flex: 1;
}

.pet-name {
	font-size: 28rpx;
	font-weight: 700;
	color: #333333;
	display: block;
	margin-bottom: 8rpx;
}

.service-info,
.service-time {
	font-size: 24rpx;
	color: #666666;
	display: block;
	margin-bottom: 5rpx;
}

/* 评价对象卡片 */
.target-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 25rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.target-header {
	margin-bottom: 20rpx;
}

.target-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #333333;
}

.target-info {
	display: flex;
	align-items: center;
}

.target-avatar {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: 3rpx solid #FFB6C1;
}

.target-details {
	flex: 1;
}

.target-name {
	font-size: 28rpx;
	font-weight: 700;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.target-stats {
	display: flex;
	gap: 15rpx;
}

.stat-item {
	font-size: 22rpx;
	color: #666666;
	background: #F5F5F5;
	padding: 5rpx 12rpx;
	border-radius: 15rpx;
}

/* 评分卡片 */
.rating-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.section-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #333333;
	display: block;
	margin-bottom: 20rpx;
}

.required {
	color: #FF4444;
}

.star-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;
}

.star-item {
	margin: 0 8rpx;
}

.star-icon {
	font-size: 60rpx;
	opacity: 0.3;
	transition: all 0.3s ease;
}

.star-icon.active {
	opacity: 1;
	transform: scale(1.1);
}

.rating-text {
	font-size: 26rpx;
	color: #FF8C42;
	font-weight: 600;
	margin-left: 20rpx;
}

/* 标签卡片 */
.tags-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.tags-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.tag-item {
	display: flex;
	align-items: center;
	padding: 15rpx 25rpx;
	background: #F5F5F5;
	border-radius: 30rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.tag-item.active {
	background: rgba(255, 182, 193, 0.2);
	border-color: #FFB6C1;
}

.tag-icon {
	font-size: 28rpx;
	margin-right: 8rpx;
}

.tag-text {
	font-size: 26rpx;
	color: #666666;
}

.tag-item.active .tag-text {
	color: #FFB6C1;
	font-weight: 600;
}

/* 评论卡片 */
.comment-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.comment-textarea {
	width: 100%;
	min-height: 250rpx;
	background: #F5F5F5;
	border-radius: 20rpx;
	padding: 20rpx;
	font-size: 26rpx;
	line-height: 1.6;
	margin-bottom: 10rpx;
}

.char-count {
	font-size: 22rpx;
	color: #999999;
	text-align: right;
	display: block;
}

/* 照片卡片 */
.photos-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.photos-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.photo-item {
	width: 200rpx;
	height: 200rpx;
	position: relative;
}

.photo-preview {
	width: 100%;
	height: 100%;
	border-radius: 15rpx;
}

.delete-photo {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 40rpx;
	height: 40rpx;
	background: #FF4444;
	color: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	font-weight: 700;
}

.upload-photo {
	width: 200rpx;
	height: 200rpx;
	background: #F5F5F5;
	border-radius: 15rpx;
	border: 2rpx dashed #CCCCCC;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.upload-icon {
	font-size: 48rpx;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999999;
}

.photo-hint {
	font-size: 22rpx;
	color: #999999;
}

/* 匿名卡片 */
.anonymous-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.anonymous-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.anonymous-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
}

.anonymous-hint {
	font-size: 22rpx;
	color: #999999;
}

/* 底部按钮 */
.footer-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFFFFF;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
	display: flex;
	gap: 20rpx;
}

.cancel-btn {
	flex: 1;
	height: 90rpx;
	background: #F5F5F5;
	color: #666666;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
}

.submit-btn {
	flex: 2;
	height: 90rpx;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: #FFFFFF;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 700;
	border: none;
	box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.3);
}
</style>
